<script lang="ts" setup>
	import { ref } from 'vue';
	import { useRouter, useRoute } from 'vue-router'
	import { NewsApi } from '@/api/news'
	import utils from '@/utils'
	const router = useRouter()
	const toDetail = (id : number) => {
		router.push({ name: 'newsDetail', query: { id: id } })
	}
	let page = ref(1)
	let newsCount = ref(0)
	let topNews = ref<any>({})
	let newsList = ref<any>([])
	let companyNews = ref<any>([])
	let companyNotice = ref<any>([])
	const getNewsList = (type:number,size:number)=>{
		NewsApi.getNews({
			size: size,
			page: page.value,
			type: type
		}).then((res : any) => {
			if (res.code == 1) {
				if(type==0){
					topNews.value = res.data.list[0]
				}else if(type==1){
					newsList.value = [...res.data.list]
					newsCount.value = res.data.count
				}else if(type==2){
					companyNews.value = [...res.data.list]
				}
				else if(type==3){
					companyNotice.value = [...res.data.list]
				}
			}
		})
	}
	getNewsList(0,1)
	getNewsList(1,6)
	getNewsList(2,4)
	getNewsList(3,5)

	const pageChange = (current : number) => {
		page.value = current
		getNewsList(1,6)
	}
</script>

<template>
	<div class="item item1">
		<div class="item1-box" v-if="topNews.id">
			<img class="img" :src="topNews.cover">
			<div class="right">
				<div class="right-time">{{utils.dateFormat(new Date(topNews.createTime*1000),'yyyy-MM-dd')}}</div>
				<div class="right-title">{{topNews.title}}</div>
				<div class="right-content">
					<span v-html="topNews.content.replace(/<[^>]+>/g, '')"></span>
				</div>
				<div class="btn-box">
					<a-button type="primary" size="large" @click="toDetail(topNews.id)">了解详情</a-button>
				</div>
			</div>
			<div class="label">WEILAI</div>
		</div>
	</div>
	<div class="item item2">
		<div class="title">
			业内资讯
		</div>
		<div class="text">
			了解协作机器人最新市场趋势解析
		</div>
		<div class="item2-list">
			<div v-for="(item, index) in newsList" :key="index" class="li" @click="toDetail(item.id)">
				<div class="img-box">
					<img :src="item.cover" class="img"> 
				</div>
				<div class="li-content">
					<div class="li-title">
						{{ item.title }}
					</div>
					<div class="li-text">
						<span v-html="item.content.replace(/<[^>]+>/g, '')"></span>
					</div>
					<div class="li-time">
						{{ utils.dateFormat(new Date(item.createTime*1000),'yyyy-MM-dd') }}
					</div>
				</div>
			</div>
		</div>
		<div class="page-box">
			<a-pagination @change="pageChange" :current="page" :defaultPageSize="6" simple :total="newsCount" />
		</div>
	</div>
	<div class="item item3">
		<div class="title">
			公司新闻
		</div>
		<div class="text">
			自主创新，不断改进方能树立行业标杆
		</div>
		<div class="item3-box">
			<div class="box-left">
				<div class="box-title">
					新闻动态
				</div>
				<div class="left-list">
					<div class="left-li" v-for="(item,index) in companyNews" :key="index" @click="toDetail(item.id)">
						<div class="time">
							<div class="time-top">{{ utils.dateFormat(new Date(item.createTime*1000),'dd') }}</div>
							<div class="time-bottom">{{ utils.dateFormat(new Date(item.createTime*1000),'yyyy-MM') }}</div>
						</div>
						<div class="content">
							<div class="content-title">{{item.title}}</div>
							<div class="content-text">
								<span v-html="item.content.replace(/<[^>]+>/g, '')"></span>
							</div>
						</div>
						<img :src="item.cover" class="img" />
					</div>
				</div>
			</div>
			<div class="box-right">
				<div class="box-title">
					通知公告
				</div>
				<div class="right-list">
					<img src="../../assets/image/news/t5.jpg" class="img" />
					<div class="right-li" v-for="(item,index) in companyNotice" :key="index" @click="toDetail(index)">
						<div class="li-title">
							<div class="title-icon"></div>
							<div class="title-text">{{item.title}}</div>
						</div>
						<div class="time">
							发布时间：{{ utils.dateFormat(new Date(item.createTime*1000),'yyyy-MM-dd') }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.item {
		width: 1280px;
		margin: 0 auto;
		padding: 80px 0;

		.title {
			font-size: 32px;
			font-weight: bold;
			text-align: center;
		}

		.text {
			margin-top: 25px;
			color: #495770;
			line-height: 25px;
			text-align: center;
		}
	}

	.item1 {
		.item1-box {
			overflow: hidden;
			position: relative;
			margin: 40px auto 0 auto;
			width: 1280px;
			display: flex;
			padding: 36px 34px;
			box-shadow: 0 0 10px rgb(0 0 0 / 10%);

			.img {
				width: 490px;
				height: 330px;
			}

			.right {
				padding: 55px 14px 0 40px;

				.right-time {
					font-size: 16px;
					font-weight: bold;
					color: #1677ff;
				}

				.right-title {
					margin-top: 15px;
					line-height: 35px;
					font-size: 24px;
					height: 70px;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.right-content {
					margin-top: 20px;
					color: #495770;
					height: 60px;
					line-height: 30px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.btn-box {
					margin-top: 20px;
				}
			}

			.label {
				position: absolute;
				font-weight: bold;
				z-index: -1;
				bottom: -30px;
				right: -20px;
				font-size: 160px;
				color: #F2F1F3;
			}
		}
	}

	.item2 {
		.item2-list {
			margin-top: 20px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 3 列，每列等分 */
			grid-template-rows: auto auto;
			/* 2 行，自动调整高度 */
			gap: 10px;
			/* 网格之间的间距 */

			.li {
				margin-top: 20px;
				width: 410px;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;
				cursor: pointer;
				border: 1px solid #e9e9e9;

				.img-box {
					width: 410px;
					height: 260px;
					overflow: hidden;

					.img {
						width: 410px;
						height: 260px;
					}
				}

				.li-content {
					padding: 25px 10px 15px 10px;

					.li-title {
						font-size: 18px;
						line-height: 25px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 390px;
						transition: color 0.2s;
					}

					.li-title:hover {
						color: #1677ff;
					}

					.li-text {
						color: #495770;
						margin-top: 15px;
						line-height: 25px;
						font-size: 14px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.li-time {
						margin-top: 15px;
						font-size: 14px;
						color: #b8b8b8;
					}
				}

			}

			.li:hover {
				box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);

				.img {
					animation: img-scale 0.2s linear forwards;
				}
			}

			@keyframes img-scale {
				0% {
					transform: scale(1);
				}

				100% {
					transform: scale(1.1);
				}
			}

		}

		.page-box {
			display: flex;
			justify-content: center;
			margin-top: 40px;
		}
	}

	.item3 {
		.item3-box {
			display: flex;
			justify-content: space-between;
			margin-top: 40px;

			.box-title {
				font-size: 24px;
				font-weight: bold;
				border-bottom: 2px solid #1677ff;
				padding-bottom: 10px;
			}

			.box-left {
				.left-list {
					margin-top: 10px;

					.left-li {
						display: flex;
						align-items: flex-start;
						padding: 30px 0;
						border-bottom: 1px solid #e9e9e9;

						.time {
							.time-top {
								font-size: 28px;
								font-weight: bold;
								color: #1677ff;
							}

							.time-bottom {
								font-size: 14px;
								margin-top: 8px;
								color: #1677ff;
							}
						}

						.content {
							margin-left: 50px;
							width: 400px;
							cursor: pointer;
							.content-title {
								
								font-size: 18px;
								font-weight: bold;
								line-height: 25px;
								max-height: 50px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								transition: color 0.2s;
							}

							.content-title:hover {
								color: #1677ff;
							}

							.content-text {
								margin-top: 15px;
								color: #495770;
								line-height: 25px;
								height: 50px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}

						.img {
							cursor: pointer;
							margin-left: 50px;
							width: 170px;
							height: 114px;
						}
					}
				}
			}

			.box-right {
				.right-list {
					width: 450px;

					.img {
						width: 100%;
						height: 260px;
						margin: 40px 0 10px 0;
					}

					.right-li {
						margin-top: 30px;

						.li-title {
							display: flex;
							align-items: center;

							.title-icon {
								margin-right: 18px;
								width: 10px;
								height: 10px;
								border-radius: 50%;
								background-color: #1677ff;
							}

							.title-text {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								width: 450px;
								transition: color 0.2s;
								font-weight: bold;
								cursor: pointer;
							}

							.title-text:hover {
								color: #1677ff;
							}
						}

						.time {
							margin: 15px 0 0 28px;
							font-size: 14px;
							color: #b8b8b8;
						}
					}
				}
			}
		}
	}
</style>